<template>
	<view>
		<view class="head">
			<view class="head-top">
				<view class="head-total">{{dataInfo.all_money || 0}}</view>
				<view class="head-text">上月余额</view>
			</view>
			<view class="flex flex-a-center">
				<view class="flex1">
					<view class="head-num">{{dataInfo.today_income || 0}}</view>
					<view class="head-text">余额</view>
				</view>
				<view class="flex1">
					<view class="head-num">{{dataInfo.today_expenses || 0}}</view>
					<view class="head-text">昨日收益</view>
				</view>
			</view>
		</view>
		<view class="screen flex flex-a-center">
			<view class="screen-text">查询月份</view>
			<view class="screen-picker">
				<picker mode="date" fields="month" @change="bindDateChange">
					<view class="screen-picker-text">{{pickerText}}</view>
				</picker>
			</view>
			<view class="screen-btn">确定</view>
		</view>
		<view class="degs flex flex-a-center">
			<view class="degs-item" :class="{on:changeCur == 'blance'}" @click="change('blance')">当月收入</view>
			<view class="degs-item" :class="{on:changeCur == 'expense'}" @click="change('expense')">当月支出</view>
			<view class="degs-item" :class="{on:changeCur == 'total'}" @click="change('total')">合计</view>
		</view>
		<view class="list">
			<view class="list-head flex flex-a-center">
				<view class="list-head-item">日期</view>
				<view class="list-head-item">备注</view>
				<view class="list-head-item">金额</view>
			</view>
			<view class="list-cont">
				<view class="list-cont-item flex flex-a-center" v-for="(item,index) in dataList" :key="index">
					<view>{{item.month}}</view>
					<view>{{item.remark}}</view>
					<view class="price">{{item.money}}</view>
					<view><navigator :url="'/pages/user/new_deital_view?type='+changeType+'&day='+pickerText">明细</navigator></view>
				</view>
				<view class="nodata" v-if="dataList.length == 0">暂无数据</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                pickerText:'选择月份',
				dataInfo:{},
				dataList:[],
				changeCur:'blance',
				changeType:1
            };
        },
        methods: {
			bindDateChange: function(e) {
				this.pickerText = e.detail.value
				this.getData()
			},
			//只取年月
			dateTime(e) {
				var a = new Date();
				var y = a.getFullYear();
				var m = a.getMonth() - 1;
				return y + '-' + m;
			},
			getData(){
				let that = this
				henglang.get('Retreat_Granary/granaryList',{month:that.pickerText},true,function(res){
					that.dataInfo = res.data.data
					that.dataList = that.dataInfo[that.changeCur]
				})
			},
			change(type){
				this.changeCur = type
				this.dataList = this.dataInfo[this.changeCur]
				switch(this.changeCur){
					case 'blance':
						this.changeType = 1
					break;
					case 'expense':
						this.changeType = 2
					break;
					case 'total':
						this.changeType = 3
					break;
				}
			}
        },
		onLoad() {
			let that = this
			that.pickerText = that.dateTime()
			that.getData()
        },
		onReachBottom() {
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		&1{
			flex: 1;
		}
		&-a-center{
			align-items: center;
		}
		&-a-start{
			align-items: flex-start;
		}
		&-a-end{
			align-items: flex-end;
		}
		&-j-center{
			justify-content: center;
		}
		&-j-start{
			justify-content: flex-start;
		}
		&-j-end{
			justify-content: flex-end;
		}
	}
	.head{
		color: #FFFFFF;
		height: 260rpx;
		background-image: url(../../static/images/ydt/deital_head.png);
		background-size: 100%;
		background-position: bottom center;
		background-repeat: no-repeat;
		background-color:#0aac2a;
		text-align: center;
		&-total{
			font-size: 56rpx;
		}
		&-num{
			font-size: 34rpx;
		}
		&-text{
			font-size: 30rpx;
		}
		&-top{
			padding-top: 35rpx;
		}
	}
	.screen{
		height: 120rpx;
		&-text{
			font-size: 30rpx;
			width: 168rpx;
			text-align: center;
		}
		&-picker{
			width: 428rpx;
			border: 1px solid #989898;
			margin-right: 20rpx;
			border-radius: 7rpx;
			height: 50rpx;
			box-sizing: border-box;
			&-text{
				color: #999999;
				padding-left: 10rpx;
			}
		}
		&-btn{
			width: 108rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
			background-color: #eca140;
			border-radius: 7rpx;
		}
	}
	.degs{
		height: 106rpx;
		background-color: #f2f2f2;
		&-item{
			width: 168rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #4c4c4c;
			background-color: #FFFFFF;
			border-radius: 50px;
			margin-left: 26rpx;
			text-align: center;
			&.on{
				background-color: #44ae59;
				color: #FFFFFF;
			}
		}
	}
	.list{
		text-align: center;
		&-head{
			border-bottom: 1px solid #e5e5e5;
			height: 90rpx;
			&-item{
				color: #1a1a1a;
				font-weight: bold;
				font-size: 34rpx;
				width: 187.5rpx;
			}
		}
		&-cont{
			&-item{
				height: 100rpx;
				view{
					font-size: 30rpx;
					width: 187.5rpx;
					color: #666666;
				}
				.price{
					color: #000000;
				}
			}
			&-item:nth-child(even){
				background-color: #f2f7f3;
			}
		}
	}
	.nodata{
		padding: 20rpx 0;
		color: #999999;
	}
</style>
